// 预订核酸，与预订疫苗类似
<template>
    <div v-if="appointment_id !== -1">
        <span>您已预约核酸检测，尚未完成：</span>
        <el-card class="disp-card">
            <template #header>
                <div class="card-header">
                    <span> {{appointment_point.username}} </span>
                    <el-button type="text" @click="deleteApp">撤销</el-button>
                </div>
            </template>
            <div class="item"> 地址：{{appointment_point.address}} </div>
            <div class="item"> 联系方式：{{appointment_point.phone}} </div>
        </el-card>
    </div>

    <div v-else>
        <el-table v-loading="loading" :data="medical_points" :default-sort="{ prop: 'nucleic_acid', order: 'descending' }"
            height="650px">
            <el-table-column prop="username" sortable label="机构" />
            <el-table-column prop="nucleic_acid" sortable label="剩余核酸数量" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="phone" label="联系方式" />
            <el-table-column label="">
                <template v-slot="scope">
                    <el-tag class="mx-1" effect="dark" type="danger"
                        v-if="scope.row.nucleic_acid_waiting >= (scope.row.nucleic_acid_waiting + scope.row.nucleic_acid) * 0.6">
                        拥挤
                    </el-tag>
                    <el-tag class="mx-1" effect="dark" type="warning"
                        v-else-if="scope.row.nucleic_acid_waiting >= (scope.row.nucleic_acid_waiting + scope.row.nucleic_acid) * 0.3">
                        忙碌
                    </el-tag>
                    <el-tag class="mx-1" effect="dark" type="success"
                        v-else>
                        畅通
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button type="primary" @click="bookNucleic(scope.row.id)">预约</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

import { Request } from '../../utils/request'
import { ElMessage } from 'element-plus'

export default {
    name: 'NucleicBook',
    data() {
        return {
            medical_points: [],
            appointment_point: undefined,
            appointment_id: -1,
            loading: false
        };
    },
    created() {
        this.reload()
    },
    methods: {
        reload() {
            this.loading = true
            Request({
                url: '/get-medical-point-list',
                method: 'get'
            }).then(res => {
                this.medical_points = res.medical_point_list.filter(x => x.nucleic_acid > 0)
                this.appointment_id = res.appointment_id
                if(this.appointment_id > -1) {
                    let temp = res.medical_point_list.filter(x => x.id === res.appointment_id)
                    this.appointment_point = temp[0]
                }
                this.loading = false
            })
        },
        bookNucleic(id) {
            Request({
                url: '/nucleic-acid-test',
                method: 'post',
                data: {
                    medical_point_id: id,
                    time: new Date(+new Date() + 8*3600*1000).toISOString().slice(0, 19).replace('T', ' ')
                }
            }).then(res => {
                if (res === 'success') {
                    ElMessage({
                        message: '预约成功',
                        type: 'success'
                    })
                    this.reload()
                }
                else if (res) {
                    ElMessage({
                        message: '错误：' + res,
                        type: 'error'
                    })
                }
            })
        },
        deleteApp() {
            Request({
                url: '/nucleic-acid-cancel',
                method: 'delete'
            }).then(res => {
                if (res === 'success') {
                    ElMessage({
                        message: '取消预约成功',
                        type: 'success',
                        duration: 1000
                    })
                    this.reload()
                }
                else if (res) {
                    ElMessage({
                        message: '错误：' + res,
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.disp-card {
    width: 480px;
    margin-top: 20px;
    margin-left: 20px;
}

.item {
    font-size: 14px;
    margin-bottom: 18px;
}
</style>